<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: rgb(30, 30, 30);
        }
        .box {
            background-color: rgb(30, 30, 30);
            height: 100vh;
            width: 80%;
            border-top: 20px solid rgb(30, 30, 30);
            /* border-bottom: 20px solid #000;
            border-left: 20px solid #000;
            border-right: 20px solid #000;  */
        }

        h1 {
            text-align: center;
            color: #fff;
            font-size: 26px;
            font-weight: 600;
        }

        .configBox {
            /* background: rgb(34, 35, 35); */
            background: var(--test);
            height: 100px;
            width: 600px;
            margin-left: 20%;
            margin-right: 20%;
            position: relative;
            padding: 12px 14px 18px;
            white-space: normal;
        }
        .configBox:hover{
            background-color: rgb(34, 35, 35);
        }
        p{
            color: #e7e7e7;
            font-size: 13px;
            margin:0px;
            padding:0px;
        }
        a{
            /* color: #3794ff; */
            color: #e7e7e7;
            font-size: 13px;
            text-decoration: underline;
            color: rgb(204, 204, 204);
        }
        input{
            border-style: none;
            border: 0;
            font-size: inherit;
            font-family: inherit;
            resize: none;
            /* width: 100%;
            height: 100%; */
            box-sizing: border-box;
            background-color: rgb(60,60,60);
            color: rgb(240,240,240);
            outline: none;
            /* outline-color: #007fd4; */
            padding: 4px;
            width: 300px;
            height: 30px;
            border-radius: 2px;
            margin-top: 10px;
        
        }
        select{
            border-style: none;
            border: 0;
            font-size: inherit;
            font-family: inherit;
            resize: none;
            /* width: 100%;
            height: 100%; */
            box-sizing: border-box;
            background-color: rgb(60,60,60);
            color: rgb(240,240,240);
            outline: none;
            /* outline-color: #007fd4; */
            padding: 4px;
            width: 300px;
            height: 30px;
            border-radius: 2px;
            margin-top: 10px;
            font-size: 13px;
        }
        .configItem{
            margin:2px;
            padding:0px;
        }
        .configDesc{
            color:rgba(204, 204, 204, 0.9)
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>Active Project Config</h1>
        <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#efefef SIZE=1>

        <div class="configBox">
            <p class="configItem">corePath Config</p>
            <p class="configDesc">选择下载到设备的最新core路径,不填默认使用本地该设备对应最新core</p>
            <input type="text" id="corePathInput" onclick=corePathSelect() readonly>
            <br>
            <a onclick="javascript:openConfigJson('corePath');" href="#">在luatide_project.json中编辑</a>
        </div>

        <div class="configBox">
            <p class="configItem">libPath Config</p>
            <p class="configDesc">选择下载到设备的最新lib路径,不填默认使用本地该设备对应最新lib</p>
            <input type="text" id="libPathInput" onclick=libPathSelect() readonly>
            <br>
            <a onclick="javascript:openConfigJson('libPath');" href="#">在luatide_project.json中编辑</a>
        </div>

        <div class="configBox">
            <p class="configItem">moduleModel Config</p>
            <p class="configDesc">选择将要下载的设备型号,不选默认使用air72XUX/air82XUX</p>
            <select name="moduleModel" id="moduleModel" onchange=moduleModelSelect()>
            </select>
            <br>
            <a onclick="javascript:openConfigJson('moduleModel');" href="#">在luatide_project.json中编辑</a>
        </div>

        <div class="configBox">
            <p class="configItem">modulePort Config</p>
            <p class="configDesc">选择将要下载的设备端口,不选会默认自动找寻,多设备同时连接等特殊情况可能找寻失败</p>
             <select name="modulePort" id="modulePort" onchange=modulePortSelect()>
              
            </select> 
            <!-- <input type="text" id="moudlePortInput"> -->
            <br>
            <a onclick="javascript:openConfigJson('modulePort');" href="#">在luatide_project.json中编辑</a>
        </div>
    </div>
</body>
<script>
    const vscode = acquireVsCodeApi();
    const selecte = document.getElementById('moduleModel')
    const portSelecte = document.getElementById('modulePort')
    // Handle the message inside the webview
    window.addEventListener('message', event => {

        const message = event.data; // The JSON data our extension sent

        switch (message.command) {
            case 'initConfigData':
                this.initData(message.text)
                break
            case 'coreConfigPath':
                this.corePathHandle(message.text)
                break
            case 'libConfigPath':
                this.libPathHandle(message.text)
                break
            case 'serialPortUpdate':
                this.updateSerialPort(message.text)
                break;
        }
    });
    function alert(data) {
        // document.documentElement.style.setProperty('--test',rgb(34, 35, 35))
        vscode.postMessage({
            command: 'alert',
            text: data
        })
    }
    function initData(data){
        document.getElementById('corePathInput').value = data['corePath']
        document.getElementById('libPathInput').value = data['libPath']
        // 初始化moduleModel下拉框数据
        selecte.options.length = 0;//清空原有数据
        for (let index = 0; index < data['moduleModelArray'].length; index++) {
            const element = data['moduleModelArray'][index];
            var option = document.createElement("option")
            option.text = element
            selecte.append(option,null)
            if (data['moduleModel']===element) {
                option.selected = true
            }
        }
        // 初始化modulePort下拉框数据
        portSelecte.options.length = 0;
        for (let index = 0; index < data['modulePortArray'].length; index++) {
            const element = data['modulePortArray'][index];
            const reg = /\[(\w*)\]/ig;
            const comPortList = reg.exec(element);
            let comPort;
            if (comPortList===null) {
                comPort = "";
            }
            else{
                comPort = comPortList[1];
            }
            var option = document.createElement("option")
            option.text = element
            portSelecte.append(option,null)
            if (data['modulePort']===comPort) {
                option.selected = true
            }
        }
    }
    function corePathHandle(data) {
        document.getElementById('corePathInput').value = data
    }
    function libPathHandle(data){
        document.getElementById('libPathInput').value = data
    }
    function corePathSelect() {
        vscode.postMessage(
            {
                command:"coreConfigPath"
            }   
        )
    }
    function libPathSelect() {
        vscode.postMessage(
            {
                command:"libConfigPath"
            }
        )
    }
    function moduleModelSelect() {
        const data = document.getElementById('moduleModel').value
        vscode.postMessage(
            {
                command:"moduleModel",
                text:data
            }
        )
    }
    function modulePortSelect() {
        const data = document.getElementById('modulePort').value
        vscode.postMessage(
            {
                command:"modulePort",
                text:data
            }
        )
    }
    function openConfigJson(data) {
        vscode.postMessage(
            {
                command:'configJsonSelected',
                text:data
            }
        )
        return false
    }
</script>
</html>
